@tailwind base;
@tailwind components;
@tailwind utilities;

rt {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

/* 
  中文 font-cursive
  英文 font-serif
  数字 font-mono
*/

/* background: 背景色 */
/* primary: 主色 */
/* secondary: 次色 */
/* accent 重点突出的颜色 */
/* muted 柔和的颜色 */
/* destructive 破坏性的 */

/* foreground: 文字颜色 以上颜色后面加上 forgeround 就是文本色 */

[data-theme="zinc"] {
  .underline-animation {
    @apply from-transparent to-transparent;
  }
}

@layer utilities {
  .underline-animation {
    @apply relative bg-gradient-to-r from-primary to-primary-foreground bg-no-repeat pb-0.5;
    background-position: bottom left;
    background-size: 0% 2px;
    transition:
      background-size 300ms ease-out,
      background-position 0s 300ms;

    &:hover {
      background-position: bottom right;
      background-size: 100% 2px;
    }
  }

  .text-primary-outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: hsl(var(--primary));
    color: transparent;
  }

  [prose-h1],
  .prose-h1 {
    @apply scroll-m-20 text-f400 tracking-tight lg:text-5xl;
  }

  [prose-h2],
  .prose-h2 {
    @apply mt-12 scroll-m-20 border-b border-border pb-2 text-f300 tracking-tight first:mt-0;
  }

  [prose-p],
  .prose-p {
    @apply text-f100 [&:not(:first-child)]:mt-6;
  }

  [prose-blockquote],
  .prose-blockquote {
    @apply mt-6 border-l-2 border-border pl-6 italic;
  }

  [prose-small],
  .prose-blockquote {
    @apply text-sm font-medium leading-none;
  }

  [prose-muted],
  .prose-blockquote {
    @apply text-sm text-muted-foreground;
  }
}

/* loading page */
.loader {
  display: inline-block;
  position: relative;
  border: 2px solid;
  @apply h-24 w-24 rounded-full border-primary/70;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;

  &::after {
    content: " ";
    @apply absolute left-2.5 top-2.5 h-8 w-8 rounded-full bg-primary;
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* loading page end */

/* popover 遮罩 */
[data-radix-focus-guard] {
  @apply !pointer-events-auto left-0 top-0 z-40 h-screen w-screen;
}

.dot {
  @apply mx-1;
}

.fuck {
  .dot {
    @apply !-mx-1;
  }

  .title {
    .char {
      &.symbol {
        @apply !-mx-3;
      }
    }
  }
}
